<template>  
    <div class="bottom-navigation" ref="bottomNavigation">  
      <div class="navigation-items" >  
        <a  
          v-for="item in items"  
          :key="item.id"  
          :class="{ active: navCurrent === item.link }"  
          :href="item.link"
          @click.prevent="navigateTo(item)"  
        >  
          {{ item.label }}  
        </a>  
      </div>  
    </div>  
  </template>  
    
  <script>  
    import { mapState,mapActions } from 'vuex';  

  export default {  
    name: 'BottomNavigation',  
    data() {  
      return {  
        items: [  
          { id: 'home', label: '首页', link: '/' },  
        //   { id: 'cart', label: '购物车', link: '#' },  
          { id: 'about', label: '联系我们', link: '/about' },  
        ],  
      };  
    },  
    computed:{
        ...mapState(['navCurrent']),    

    },
    methods: {  
        ...mapActions(['updateNavCurrent']),

      navigateTo(item) {  
        const link = item.link; 
        this.updateNavCurrent(link)
        this.$router.push(link);
      },  
    },  
  };  
  </script>  
    
  <style scoped lang="less">  
  @base-font-size: 16px; // 定义基础字体大小  
  .bottom-navigation { 
    display: flex;  
    justify-content: center;  
    align-items: center;  
    position: fixed;  
    bottom: 0;  
    left: 0;  
    width: 100%;  
    background-color: #fff;  
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);  
    z-index: 999;  
    padding:  10px;  
    
    .navigation-items {  
      display: flex;  
      justify-content: space-between;  
      max-width: 360px; // 适配常见的手机宽度  
    
      a {  
        text-decoration: none;  
        color: #333;  
        font-size:  (16 / @base-font-size) * 1em; 
        padding:  (10/@base-font-size) * 1em;  
        transition: color 0.3s ease;  
    
        &.active {  
          color: #f00;  
        }  
      }  
    }  
  }  
  </style>